<template>
  <div>
    <keep-alive>
      <router-view></router-view>
    </keep-alive>
    <div class="ai" @click="toggleAssistant">
      <svg t="1744006094753" class="icon" viewBox="0 0 1110 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
        p-id="7164" width="50" height="50">
        <path
          d="M676.308458 101.633399s181.480141-96.711061 215.507103-60.16643c34.036002 36.549151-53.463191 114.809354-34.582928 203.596762-0.00452 0.00452-180.924174-41.100845-180.924175-143.430332z"
          fill="#A3D9FF" p-id="7165"></path>
        <path
          d="M46.326027 454.739965s-32.725186-68.881093 60.19807-87.151149c0 0-80.420789-264.414079 278.204762-329.073442 389.013869-70.151228 687.296708 359.855005 656.293662 776.079596l-99.472814 39.365144s0-517.288462-691.061912-387.969737c0.00904 0-183.229402 59.976588-204.161768-11.250412z"
          fill="#A3D9FF" p-id="7166"></path>
        <path
          d="M854.651682 223.127912c-2.52219-79.584579 68.365807-148.158308 37.163879-181.660943-20.195598-21.687216-92.326609 3.557282-147.629462 27.671767 0 0 110.357102-66.97815 110.357102-18.563859 0 25.086296-35.482419 93.361701-39.921111 132.2884-124.495829-124.486789-271.637124-172.882999-429.897751-144.347903C26.107828 103.179257 106.528617 367.593336 106.528617 367.593336 13.605361 385.863392 46.330547 454.744485 46.330547 454.744485c20.932367 71.22248 204.170809 11.245893 204.170808 11.245892 546.194203-102.211966 660.682634 199.501593 684.688637 330.479179-23.079392-141.134145-128.916441-486.958905-609.50207-397.027924 0 0-177.240331 52.622461-177.240331 19.45431 0 0-28.408535-59.795785 52.260857-75.656653 0 0-2.630671-4.501973-5.265862-12.199624 52.337697 71.638325 316.426333 21.456693 316.426332 21.456693 342.787284 9.912477 426.078306 375.684232 426.078307 375.684232v-0.05876c1.365056 25.145057 3.823965 72.790939 3.823965 89.682378 0 23.373196 95.612688 0 95.612688 0s7.66601-43.943958 2.106345-111.206872a625.530179 625.530179 0 0 1 2.427268 94.003549c12.796271-220.090436-58.873695-435.439337-187.265809-577.472973zM199.465433 258.773053c1.600099-3.36744 3.557282-6.78008 5.677187-10.197241l0.0226 0.158202a201.797781 201.797781 0 0 0-5.699787 10.039039z m164.796624-205.558465c273.309544-82.748616 523.182612 198.091337 619.238265 424.885012 72.560416 171.310021 41.448889 351.045421-30.858404 137.942987-27.355363-85.261766-108.734403-177.624535-204.451052-247.852604-131.171947-96.245495-297.993555-144.10834-427.841127-109.981937-29.534028 6.531477-119.867294 43.369912-143.23145 0.565007-0.00452 0-33.113911-163.065444 187.143768-205.558465z"
          fill="#61A7D9" opacity=".36" p-id="7167"></path>
        <path
          d="M938.819595 823.98764c22.05786-331.261148-271.176079-498.146037-583.489163-498.146036-115.550643 0-337.828785 13.53304-313.958384 115.207119 1.464497 10.545284 4.953978 17.931052 4.953979 17.931052 20.936887 71.21796 204.170809 11.241373 204.170808 11.241372 581.794143-108.856444 673.781749 240.557238 688.32276 353.766493z"
          fill="#F0F0FF" p-id="7168"></path>
        <path
          d="M938.146107 747.205495a473.86883 473.86883 0 0 1-2.965155 49.264061c-9.767835-105.249442-69.256257-465.515772-639.872308-388.620625 0 0-176.697924 34.73661-194.317093 14.007646 0 0-7.114564-6.969922-8.127055-16.782958-4.090648-20.123277 2.458909-36.124266 16.344512-48.825616C62.060332 373.487486 31.771455 400.12416 41.376568 441.062283c1.464497 10.545284 4.953978 17.931052 4.953979 17.931052 20.936887 71.22248 204.170809 11.241373 204.170808 11.241372 581.794143-108.874524 673.777228 240.539158 688.32276 353.761974 1.771861-26.668315 1.473537-52.251816-0.678008-76.791186z"
          fill="#6E6E96" opacity=".15" p-id="7169"></path>
        <path
          d="M413.856082 421.006807s-2.621631 118.072833 209.414071 151.81051c0 0 65.26505 5.437624 18.319776-44.98357-46.949794-50.412155-49.734147-84.335155-143.968219-112.449887-94.234072-28.119252-83.765628 5.622947-83.765628 5.622947z"
          fill="#94CBEB" p-id="7170"></path>
        <path
          d="M641.589929 527.833747c-24.087364-25.863745-36.567231-47.374679-55.714177-66.006339 1.342456 1.952663 2.721072 3.918886 4.162969 5.93031 36.341229 50.425715-14.183927 44.983571-14.183928 44.983571-97.199227-19.983156-136.112366-69.554581-151.692989-106.655178-13.55564 4.388972-10.305722 14.920696-10.305722 14.920696s-2.621631 118.077353 209.414071 151.81051c0.00452 0 65.27409 5.437624 18.319776-44.98357z"
          fill="#61A7D9" opacity=".36" p-id="7171"></path>
        <path
          d="M950.580774 777.033327s-105.10028 2.815993-120.36902 87.137588c-15.146699 83.675227 126.186329-9.681954 213.143114 115.726925 54.480203 78.544967 78.83877-215.041537-92.774094-202.864513z"
          fill="#A3D9FF" p-id="7172"></path>
        <path
          d="M1025.532298 796.537357c37.426042 35.138895 42.135937 97.538231 1.446417 97.53823-12.574788 0-25.158617-2.431789-37.439602-13.727402-8.764383-8.059255-17.379605-38.203491-25.701023-38.827258-15.2823-1.148094-29.588269 27.481924-42.154017 33.00091-28.485376 12.484387-48.025567 6.436556-49.702506-21.375333-3.127877-51.980613 53.282389-71.611205 62.381256-74.436238-30.103555 4.646615-92.647533 21.890618-104.151069 85.442568-15.142179 83.679747 126.186329-9.677434 213.143114 115.731446 44.603886 64.329399 68.994094-120.802945-17.82257-183.346923z"
          fill="#61A7D9" opacity=".36" p-id="7173"></path>
        <path
          d="M235.793102 220.180837m-25.881826 0a25.881825 25.881825 0 1 0 51.763651 0 25.881825 25.881825 0 1 0-51.763651 0Z"
          fill="#6E6E96" p-id="7174"></path>
        <path
          d="M631.776893 787.158246c11.395054 18.717541 6.608318 28.652618-3.127877 34.578408-9.745235 5.93483-20.774165 5.613906-32.160179-13.094595-11.395054-18.717541-20.36736-51.248365-10.626646-57.174154 9.745235-5.93483 34.519647 16.9728 45.914702 35.690341z"
          fill="#61A7D9" p-id="7175"></path>
        <path
          d="M724.695629 654.670963c6.7394 11.069611 4.601414 16.543395-0.325444 19.535671-4.917818 3.001315-10.757727 2.391108-17.501646-8.687543s-12.74203-29.918233-7.819692-32.910508c4.917818-3.001315 18.902863 10.98373 25.646782 22.06238z"
          fill="#61A7D9" opacity=".51" p-id="7176"></path>
        <path
          d="M1019.79183 211.430014c9.681954 6.233154 8.054735 14.581692 2.784353 22.767509s-12.195104 13.112675-21.881578 6.879521-19.748113-22.107581-14.473211-30.293397c5.274902-8.185817 23.883962-5.586786 33.570436 0.646367z"
          fill="#61A7D9" opacity=".31" p-id="7177"></path>
        <path
          d="M1093.51842 451.670848c6.74392 11.074131 4.601414 16.547915-0.325444 19.540191-4.917818 3.001315-10.757727 2.391108-17.501646-8.687543-6.7394-11.078651-12.73751-29.918233-7.815172-32.915028 4.913298-3.001315 18.893823 10.98373 25.642262 22.06238zM433.13863 601.158052c6.368755 10.459403 2.309747 16.877879-4.859058 21.23069-7.155244 4.370892-14.708254 5.030819-21.081528-5.437624-6.373275-10.463923-10.007398-29.511428-2.843114-33.87328 7.159764-4.366372 22.410424 7.60725 28.7837 18.080214z"
          fill="#61A7D9" opacity=".51" p-id="7178"></path>
      </svg>
    </div>

    <!-- AI Assistant Dialog -->
    <Teleport to="body">
      <Transition name="slide-up">
        <div v-if="isAssistantOpen" class="assistant-container">
          <div class="assistant-dialog">
            <div class="assistant-header">
              <div class="header-title">
                <div class="title-icon">🤖</div>
                <h3>AI Assistant</h3>
              </div>
              <button class="close-button" @click="closeAssistant">
                <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                  <line x1="18" y1="6" x2="6" y2="18"></line>
                  <line x1="6" y1="6" x2="18" y2="18"></line>
                </svg>
              </button>
            </div>
            <div class="assistant-content">
              <iframe 
                :src="assistantUrl" 
                frameborder="0" 
                class="assistant-iframe"
                ref="assistantIframe"
              ></iframe>
            </div>
          </div>
        </div>
      </Transition>
    </Teleport>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue';

// State for controlling the assistant dialog
const isAssistantOpen = ref(false);
const assistantIframe = ref(null);

// URL for the AI assistant iframe - replace with your actual assistant URL
const assistantUrl = ref('http://localhost:5173/#/');

// Toggle the assistant dialog
const toggleAssistant = () => {
  isAssistantOpen.value = !isAssistantOpen.value;
  
  // If opening, ensure iframe loads properly
  if (isAssistantOpen.value) {
    document.body.style.overflow = 'hidden'; // Prevent scrolling when dialog is open
  }
};

// Close the assistant dialog
const closeAssistant = () => {
  isAssistantOpen.value = false;
  document.body.style.overflow = ''; // Restore scrolling
};

// Handle escape key to close the dialog
onMounted(() => {
  const handleKeyDown = (event) => {
    if (event.key === 'Escape' && isAssistantOpen.value) {
      closeAssistant();
    }
  };
  
  window.addEventListener('keydown', handleKeyDown);
  
  // Clean up event listener
  return () => {
    window.removeEventListener('keydown', handleKeyDown);
  };
});
</script>

<style scoped lang="scss">
.ai {
  z-index: 1000;
  position: fixed;
  bottom: 100px;
  right: 0;
  cursor: pointer;
  transition: transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);

  &:hover {
    transform: scale(1.1);
  }

  &:active {
    transform: scale(0.95);
  }

  .icon {
    width: 50px;
    height: 50px;
    filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.1));
  }
}

// Assistant dialog styles
.assistant-container {
  position: fixed;
  bottom: 0;
  right: 20px;
  z-index: 2000;
  display: flex;
  justify-content: flex-end;
  align-items: flex-end;
  pointer-events: none;
  
  @media (max-width: 768px) {
    right: 0;
    left: 0;
  }
}

.assistant-dialog {
  pointer-events: auto;
  background-color: white;
  border-radius: 12px 12px 0 0;
  width: 400px;
  height: 600px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow: 0 -4px 24px rgba(0, 0, 0, 0.12);
  
  @media (max-width: 768px) {
    width: 100%;
    border-radius: 12px 12px 0 0;
  }
  
  @media (min-width: 769px) {
    border-radius: 12px;
    margin-bottom: 20px;
  }
}

.assistant-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 16px;
  border-bottom: 1px solid #f0f0f0;
  background: linear-gradient(to right, #f8f9fa, #edf2f7);

  .header-title {
    display: flex;
    align-items: center;
    gap: 8px;
    
    .title-icon {
      font-size: 18px;
    }
    
    h3 {
      margin: 0;
      font-size: 16px;
      font-weight: 600;
      color: #333;
    }
  }

  .close-button {
    background: none;
    border: none;
    cursor: pointer;
    color: #666;
    padding: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    transition: background-color 0.2s;
    
    &:hover {
      background-color: rgba(0, 0, 0, 0.05);
    }
  }
}

.assistant-content {
  flex: 1;
  overflow: hidden;
  background-color: #fff;
}

.assistant-iframe {
  width: 100%;
  height: 100%;
  border: none;
}

// Transition animations
.slide-up-enter-active,
.slide-up-leave-active {
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.slide-up-enter-from {
  transform: translateY(100%);
  opacity: 0;
}

.slide-up-leave-to {
  transform: translateY(20px);
  opacity: 0;
}
</style>